<template>
    <div class="tab-list">
        <Button
            v-for="tab in showData"
            :key="tab.name"
            ghost
            :class="{ active: current === tab.name }"
            class="tab-item"
            @click="handleClick(tab.name)"
            >{{ tab.label }}</Button
        >
    </div>
</template>
<script>
export default {
    name: 'TabList',
    props: {
        current: {
            type: String,
            default: ''
        },
        data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {};
    },
    computed: {
        showData() {
            return this.data.filter((item) => item.show !== false);
        }
    },
    methods: {
        handleClick(name) {
            this.$emit('on-click', name);
        }
    }
};
</script>
<style scoped>
.tab-item {
    margin-right: 10px;
    border: none !important;
    background: transparent !important;
    outline: 1px solid var(--default-color-level2) !important;
    color: var(--default-color-level2) !important;
    border-radius: 4px !important;
    margin-bottom: 5px;
}
.tab-item.active,
.tab-item.ivu-btn-default:not([disabled]):hover {
    border: none !important;
    outline: 2px solid var(--url-color) !important;
    border: none !important;
    background: transparent !important;
    color: var(--url-color) !important;
    font-weight: bold;
}
</style>
